<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas-dark-watermark</title>
</head>

<body>
    <canvas id="canvas" width="256" height="256"></canvas>
    <script>
        var mergeData = function (ctx, newData, color, originalData) {
            var oData = originalData.data;
            var bit, offset;  // offset的作用是找到alpha通道值，这里需要大家自己动动脑筋

            switch (color) {
                case 'R':
                    bit = 0;
                    offset = 3;
                    break;
                case 'G':
                    bit = 1;
                    offset = 2;
                    break;
                case 'B':
                    bit = 2;
                    offset = 1;
                    break;
            }

            for (var i = 0; i < oData.length; i++) {
                if (i % 4 == bit) {
                    // 只处理目标通道
                    if (newData[i + offset] === 0 && (oData[i] % 2 === 1)) {
                        // 没有信息的像素，该通道最低位置0，但不要越界
                        if (oData[i] === 255) {
                            oData[i]--;
                        } else {
                            oData[i]++;
                        }
                    } else if (newData[i + offset] !== 0 && (oData[i] % 2 === 0)) {
                        // // 有信息的像素，该通道最低位置1，可以想想上面的斑点效果是怎么实现的
                        oData[i]++;
                    }
                }
            }
            ctx.putImageData(originalData, 0, 0);
        }
        var processData = function (ctx, originalData) {
            var data = originalData.data;
            for (var i = 0; i < data.length; i++) {
                if (i % 4 == 0) {
                    // R分量
                    if (data[i] % 2 == 0) {
                        data[i] = 0;
                    } else {
                        data[i] = 255;
                    }
                } else if (i % 4 == 3) {
                    // alpha通道不做处理
                    continue;
                } else {
                    // 关闭其他分量，不关闭也不影响答案
                    data[i] = 0;
                }
            }
            // 将结果绘制到画布
            ctx.putImageData(originalData, 0, 0);
        }
        function encodeImg(src) {
            var textData;
            var ctx = document.getElementById('canvas').getContext('2d');
            ctx.font = '30px Microsoft Yahei';
            ctx.fillText('秋风的笔记', 60, 130);
            textData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height).data;
            var img = new Image();
            var originalData;
            img.onload = function () {
                // 获取指定区域的canvas像素信息
                ctx.drawImage(img, 0, 0);
                originalData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
                mergeData(ctx, textData, 'R', originalData)
            };
            img.src = src;
        }

        function decodeImg(src) {
            var ctx = document.getElementById('canvas').getContext('2d');
            var img = new Image();
            var originalData;
            img.onload = function () {
                // 获取指定区域的canvas像素信息
                ctx.drawImage(img, 0, 0);
                originalData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
                console.log(originalData)
                processData(ctx, originalData)
            };
            img.src = src;
        }
        // encodeImg('./qiufeng.png')
        decodeImg('./qiufeng-encode.png')

    </script>
</body>

</html>